import React, { useState } from 'react';
import Taro from '@tarojs/taro';
import {AtCountdown, AtIcon} from "taro-ui";
import {View, Image, Text, ScrollView} from "@tarojs/components";
import './index.scss';

const Group: React.FC<{ isJoin; groupList; nums; groupDetail; initData; goToGroup }> = (props) => {
  const [groupLists, setGroupLists] = useState(props.groupList)
  const onTimeUp = (e) => {
    props.initData()
  }
  const jump = (type) => {
    let mpkey = ''
    const uInfo = Taro.getStorageSync('user') || ''
    if (uInfo && uInfo.mpkey && uInfo.mpkey !== 'undefined') {
      mpkey = uInfo.mpkey
    }
    Taro.navigateTo({url: `/common/group/play?category=${type.activity_type}`+ '&mpkey=' + mpkey})
  }
  return (
    <View>
      <View className='group-box'>
        <View className='group-box-nums'>目前<Text className='nums'>{props.nums}</Text>人正在拼团，您可以直接参团</View>
        <ScrollView
          scrollY
          scrollWithAnimation
          className='group-box-item-scroll'
          enableFlex
        >
          <View className='group-box-item'>
            {groupLists.map((item, index) =>
              <View>
                <View className='group-box-items' key={index}>
                  <View className='left-img'><Image className='img' mode='aspectFill' src={item.head_img} /></View>
                  <View className='right-group'>
                    <View className='right-left'>
                      <View className='username'>{item.nick_name}</View>
                      <View className='count-down'>还差 <Text className='nums'
                        decode
                      >{item.rest_num}</Text>人成团，剩余<AtCountdown
                        onTimeUp={onTimeUp.bind(this, index)} isShowDay
                        format={{day: ':', hours: ':', minutes: ':', seconds: ''}} seconds={0} day={item.date_poor.day}
                        hours={item.date_poor.hour} minutes={item.date_poor.min}
                      /></View></View>
                    {!props.isJoin && <View className='right-btn' onClick={() => {
                      props.goToGroup(item.step_num, props.groupDetail.activity_id, index)
                    }}
                    >
                      <View className='go-group'>去凑团</View>
                    </View>}
                  </View>
                </View>
              </View>)}
          </View>
        </ScrollView>
      </View>
      <View className='group-box'>
        {props.groupDetail && <View className='how-play'>
          <View className='go-info' onClick={jump.bind(this, props.groupDetail)}><View
            className='title'
          >拼团玩法</View><AtIcon value='chevron-right' size={16} color='#000' /></View>
          <View className='play-content'>{props.groupDetail.info_str}</View>
        </View>}
      </View>
    </View>
  )
}
Group.defaultProps = {
  groupList: [],
  nums: 0,
  isJoin: 0,
  groupDetail: null
}

export default Group
